<template>
	<view>
		<view style="height: 223rpx;padding:82rpx 30rpx 0; border-radius: 0 0 40rpx 40rpx;background-image: linear-gradient(to right,#FF4A2B,#FF4141);">
			<view style="color: #fff;display: flex;align-items: center;">
				<image @click="backTo()" src="/static/shequ/返回@2x.png" style=" width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
				<view style="position: relative;margin: 0 30rpx;">
					<image src="/static/index/搜索@2x.png" style="width: 24rpx;height: 24rpx;position: absolute;top: 25rpx;left: 20rpx;" mode="aspectFit"></image>
					<input type="text"
						   value=""
						   placeholder-style="font-size:24rpx;color:#9EA9B7;"
						   placeholder="请输入商品名称"
						   style="padding-left: 64rpx; width: 581rpx;height: 72rpx;background-color: #F4F4F4;border-radius: 15rpx;box-sizing: border-box;"/>
				</view>
				<image src="/static/筛选@2x.png" style="width: 40rpx;height: 36rpx;" mode="aspectFit"></image>
			</view>
			
		</view>
		<view class="horizonal-tab">
			<scroll-view scroll-x="true"  scroll-with-animation class="scroll-tab">
				<block v-for="(item, index) in fl" :key="index" >
					<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">{{ item}}<view class="select"></view></view>
				</block>
			</scroll-view>
		</view>
	<view v-if="tabIndex===0">
		<view style="display: flex;margin: 30rpx 30rpx 0;">
			<block v-for="item in List" :key="item">
				<view class="list" style="width: 334rpx;height: 553rpx;margin-right:22rpx ;">
					<image :src="item.src" mode="aspectFill"></image>
					<view style="margin-left: 20rpx;">
						<view style="display: flex;align-items: center;">
							<text class="cx">{{item.cx}}</text>
							<text class="title">{{item.title}}</text>
						</view>
						<view style="margin: 18rpx 0;">
							<text class="mj">{{item.mj}}</text>
							<text class="gold" style="width: 117rpx;height: 34rpx;margin-left: 7rpx;">{{item.gold}}</text>
						</view>
						<text class="price">{{item.price}}</text>
					</view>
				</view>
			</block>

		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				fl:['服饰','食品','美妆','电器','手机','运动','鞋包','百货'],
				List:[
					{
						src:"",
						cx:"促销",
						title:"超级无敌 纯羊绒",
						mj:"满减",
						gold:"金币抵￥8.1",
						price:"￥27"
					},{
						src:"",
						cx:"促销",
						title:"超级无敌 纯羊绒",
						mj:"满39减5",
						gold:"金币抵￥8.1",
						price:"￥27"
					}
				]
			};
		},
		methods:{
			toggleTab(index) {
				this.tabIndex = index;
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F2F2F2;
}
.select {
	display: none;
	width: 60rpx;
	height: 6rpx;
	background-color: #fff;
	margin-left: -10rpx;
	border-radius: 3rpx;
}
.horizonal-tab .active {
	.select {
		display: block;
		margin-top: 20rpx;
	}
}
.scroll-tab {
	white-space: nowrap; /* 必要，导航栏才能横向*/
	cursor: pointer;
	font-size: 24rpx;
	color: #fff;
	margin: -100rpx 30rpx 30rpx;	
}
.scroll-tab-item {
	display: inline-block; /* 必要，导航栏才能横向*/
	margin: 10rpx 20rpx;
}
.mj,.gold{
	width: 86rpx;height: 34rpx;
	border: 2rpx solid #D69993;
	border-radius: 6rpx;
	font-size: 18rpx;
	color: #D53128;
	padding: 1rpx 4rpx;
}
.title{
	width: 200rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	font-size: 25rpx;
	color: #2F2F2F;
}	
.cx{
	width: 50rpx;
	height: 28rpx;
	border-radius: 6rpx;
	background-color: #F55519;
	font-size: 18rpx;
	color: #fff;
	padding: 1rpx 4rpx;
	margin-right: 10rpx;
}
.price{
	font-size: 24rpx;
	color: #F55519;
}
.list image{
	width: 259rpx;
	height: 236rpx;
	background-color: #D6AEB9;
	margin: 102rpx 39rpx 40rpx 38rpx;	
}
.list2 image{
	width: 259rpx;
	height: 236rpx;
	background-color: #D6AEB9;
	margin: 71rpx 40rpx 30rpx 34rpx;	
}
.list,.list2{
	margin-top: 32rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}
</style>
